<div class="album-info">
  <div class="main">
    <ng-container *ngIf="albumInfo else skeleton">
      <div class="info">
        <div class="thumbnail">
          <img [src]="albumInfo.cover" [alt]="albumInfo.albumTitle" class="cover">
          <div class="back-cover"></div>
        </div>
        <div class="contents">
          <h1>
            <xm-tag xmColor="#5fa8fc" class="tag">连载</xm-tag>
            <span>{{ albumInfo.albumTitle }}</span>
          </h1>
          <div class="record">
            <div class="rate">
              <div class="star-wrap">
                <xm-rate [(ngModel)]="score" disabled></xm-rate>
              </div>
              <span class="score">{{ score * 2 }}分</span>
            </div>
            <div class="play-count">
              <i xmIcon="headset" class="icon"></i>
              <span>{{ albumInfo.playCount | numberFormat }}</span>
            </div>
          </div>
          <div class="metas">
            <xm-tag class="meta" *ngFor="let meta of albumInfo.metas">{{ meta.metaDisplayName }}</xm-tag>
          </div>
          <div class="actions">
            <button xmBtn xmRipples [xmCircle]="true" class="btn" (click)="playAll()">
              <i xmIcon="play1" class="icon"></i>
              播放全部
            </button>
          </div>
        </div>
      </div>
      <div class="intro">
        <article xmToggleMore="360" (initTrueHeight)="articleHeight = $event" [isFull]="moreState.full" [content]="albumInfo.detailRichIntro" [innerHTML]="albumInfo.detailRichIntro | safeContent"></article>
        <div class="more-arrow" (click)="toggleMore()" *ngIf="articleHeight > 360">
          <div class="blur" [hidden]="moreState.full"></div>
          <span>{{ moreState.label }}</span>
          <i [xmIcon]="moreState.icon" class="icon"></i>
        </div>
      </div>
      <div class="playlist">
        <table>
          <thead>
          <tr>
            <th><label xm-checkbox [ngModel]="isCheckedAll()" (ngModelChange)="checkAllChange($event)"></label></th>
            <th class="item-name">曲目</th>
            <th>播放量</th>
            <th>创建时间</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let track of tracks; trackBy: trackByTracks">
            <td class="item-checkbox"><label xm-checkbox [ngModel]="isChecked(track.trackId)" (ngModelChange)="checkedChange($event, track)"></label></td>
            <td [class]="itemCls(track.trackId)">
              <span class="prefix number">{{ track.index }}</span>
              <i xmIcon="'play1'" (click)="toggleTrack(track, 'play')" class="prefix icon icon-play"></i>
              <i xmIcon="'pause'" (click)="toggleTrack(track, 'pause')" class="prefix icon icon-pause"></i>
              <div class="prefix icon icon-playing"><i></i><i></i><i></i><i></i></div>
              <span>{{ track.title }}</span>
            </td>
            <td>
              <i xmIcon="'headset'" class="icon"></i>
              <span>{{ track.playCount | numberFormat }}万</span>
            </td>
            <td>{{ track.createDateFormat }}</td>
          </tr>
          <tr class="last"></tr>
          </tbody>
          <tfoot>
          <tr>
            <th><label xm-checkbox [ngModel]="isCheckedAll()" (ngModelChange)="checkAllChange($event)"></label></th>
            <th class="item-name">
              <button xmBtn xmRipples [xmCircle]="true" [disabled]="!selectedTracks.length" (click)="play(true)">播放选中歌曲</button>
              <button class="btn-add" xmBtn xmRipples [disabled]="!selectedTracks.length" [xmCircle]="true" (click)="play(false)">添加到播放列表</button>
            </th>
          </tr>
          </tfoot>
        </table>
        <div class="page-wrap">
          <xm-pagination
            class="page"
            [total]="total"
            [pageNum]="trackParams.pageNum"
            [pageSize]="trackParams.pageSize"
            (changed)="changePage($event)">
          </xm-pagination>
        </div>
      </div>
    </ng-container>
    <ng-template #skeleton>
      <svg role="img" aria-labelledby="Loading interface..." viewBox="0 0 400 130" preserveAspectRatio="xMidYMid meet"><title>Loading interface...</title><rect x="0" y="0" width="400" height="130" clip-path="url(#k8vk4h3v2qo)" style="fill: url(&quot;#j1umtr4lgr&quot;);"></rect><defs><clipPath id="k8vk4h3v2qo"><rect x="0" y="0" rx="3" ry="3" width="250" height="10"></rect><rect x="20" y="20" rx="3" ry="3" width="220" height="10"></rect><rect x="20" y="40" rx="3" ry="3" width="170" height="10"></rect><rect x="0" y="60" rx="3" ry="3" width="250" height="10"></rect><rect x="20" y="80" rx="3" ry="3" width="200" height="10"></rect><rect x="20" y="100" rx="3" ry="3" width="80" height="10"></rect></clipPath><linearGradient id="j1umtr4lgr"><stop offset="0.866418" stop-color="#f0f0f0" stop-opacity="1"><animate attributeName="offset" values="-3; 1" dur="2s" repeatCount="indefinite"></animate></stop><stop offset="1.86642" stop-color="#e0e0e0" stop-opacity="1"><animate attributeName="offset" values="-2; 2" dur="2s" repeatCount="indefinite"></animate></stop><stop offset="2.86642" stop-color="#f0f0f0" stop-opacity="1"><animate attributeName="offset" values="-1; 3" dur="2s" repeatCount="indefinite"></animate></stop></linearGradient></defs></svg>
    </ng-template>
  </div>
  
  <!-- 相关专辑 -->
  <div class="side">
    <ng-container *ngIf="anchor">
      <div class="card">
        <div class="card-head">
          <h3>专辑主播</h3>
        </div>
        <div class="card-body">
          <div class="anchor-info">
            <div class="anchor-head">
              <div class="photo">
                <img [xmImgLazy]="anchor.anchorCover" [alt]="anchor.anchorName" />
              </div>
              <span class="name">{{ anchor.anchorName }}</span>
            </div>
            <ul class="anchor-stats">
              <li>曲目：{{ anchor.anchorTracksCount }}</li>
              <li>专辑：{{ anchor.anchorAlbumsCount }}</li>
              <li>粉丝：{{ anchor.anchorFansCount | numberFormat }}万</li>
            </ul>
            <p class="anchor-intro">
              简介：
              {{ anchor.personalIntroduction }}
            </p>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="card-head">
          <h3>TA的专辑</h3>
        </div>
        <div class="card-body">
          <div class="albums">
            <div class="album-item" [routerLink]="'../' + item.albumId" *ngFor="let item of anchor.anchorAlbumList">
              <div class="thumbnail">
                <img [xmImgLazy]="item.cover" [alt]="item.albumTitle">
              </div>
              <div class="content">
                <div class="title">{{ item.albumTitle }}</div>
                <span class="count">
               <i xmIcon="headset" class="icon"></i>{{ item.playCount | numberFormat }}万
             </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ng-container>
    
    <div class="card">
      <div class="card-head">
        <h3>相关推荐</h3>
      </div>
      <div class="card-body">
        <div class="albums">
          <div class="album-item" [routerLink]="'../' + item.id" *ngFor="let item of relateAlbums">
            <div class="thumbnail">
              <img style="height: 100%;" [xmImgLazy]="'//imagev2.xmcdn.com/' + item.coverPath" [alt]="item.title">
            </div>
            <div class="content">
              <div class="title">{{ item.title }}</div>
              <span class="count">
               <i xmIcon="headset" class="icon"></i>{{ item.playCount | numberFormat }}
             </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
